<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div2 {
            display: none;
            width: 400px;
            height: 120px;
            border: 1px solid #333;
            border-radius: 8px;
            padding: 20px;
        }
    </style>
</head>

<body>
    <button onclick="add()">发帖</button>
    <!-- 点击按钮打开弹窗 -->
    <div class="div1">
        <!-- 评论内容 循环一个数组 生成li添加到ul中 -->
        <ul class="ul">
        </ul>
    </div>
    <div class="div2">
        <!-- 弹窗 点击按钮才显示 diaplay none/ block  xxx.style.display = '' -->
        <input type="text" placeholder="title" class="title_1">
        <br><br>
        <select name="" class="type_1">
            <option value="本地新闻">本地新闻</option>
            <option value="国内新闻">国内新闻</option>
            <option value="国际新闻">国际新闻</option>
        </select>
        <br><br>
        <button onclick="public()">发布</button>
        <!-- 点击发布时，获取上面三个框的内容，添加到数组中 关闭弹窗 -->
    </div>

    <script>
        var div2 = document.querySelector('.div2');
        var ul = document.querySelector('.ul');
        var contentList = [
            { title: '郑州：进入起，逐步解封', type: '本地新闻' },
            { title: '欧盟：凌冬将至，燃气何在？', type: '国际新闻' },
        ]
        function render() { // 渲染页面
            ul.innerHTML = ''; // 先清空
            for (var i = 0; i < contentList.length; i++) {
                var li = document.createElement('li');
                var h1 = document.createElement('h1');
                h1.innerHTML = contentList[i].title
                var p = document.createElement('p');
                var time = new Date();
                p.innerHTML = '板块名称：' + contentList[i].type + ' 时间：' + time.toLocaleTimeString();
                li.appendChild(h1)
                li.appendChild(p)
                ul.appendChild(li)
            }
        }
        render();

        function public() {
            var title = document.querySelector('.title_1').value;
            var type = document.querySelector('.type_1').value;
            // 添加到总数组中
            contentList.push({ title: title, type: type });
            render();
            div2.style.display = 'none';
        }

        // 发帖 打开弹窗
        function add() {
            div2.style.display = 'block';
        }
    </script>
</body>

</html>